<!DOCTYPE html>
<html>
    <head>
        <script src="js/vue.js"></script>
        <script src="js/velocity.js"></script>
    </head>
    <body>
        <div id="app">
            <input type="text" v-model="query">
            <fade-component :query="query" :items="items">
                <li v-for="(item,index) in ComputedList" :key="item.msg" :data-index="index">
                    {{item.msg}}
                </li>
            </fade-component>
            <div>不包含的元素：</div>
            <fade-component :query="query" :items="items">
                <li v-for="(item,index) in otherList" :key="item.msg" :data-index="index">
                    {{item.msg}}
                </li>
            </fade-component>
        </div>
        <!-- <template id="temp">
            <transition-group name="item" tag="ul" @before-enter="beforeEnter" @enter="enter" @leave="leave" v-bind:css="false">
                <slot></slot>
            </transition-group>
        </template> -->
        <script>
            Vue.component('fadeComponent',{
                props:['query','items'],
                functional:true,
                render (createElement,ctx) {
                    var data = {
                        props : {
                            tag : 'ul',
                            css : 'false'
                        },
                        on : {
                        beforeEnter(el) {
                        el.style.opacity = 0;
                        el.style.height = 0;
                        },
                    enter(el,done){
                        var delay = el.dataset.index * 150;
                        setTimeout(function(){
                            Velocity(el,{opacity:1,height:'1.6em'},{ complete : done });
                        },delay)
                    },
                    leave(el,done){
                        var delay = el.dataset.index * 150;
                        setTimeout(function(){
                            Velocity(el,{opacity:0,height:0},{complete:done});
                        },delay);
                    }
                    }
                    }
                    
                    return createElement('transition-group',data,ctx.children);
                }
                // template:'#temp',
                // methods : {
                //     beforeEnter(el){
                //         el.style.opacity = 0;
                //         el.style.height = 0;
                //     },
                //     enter(el,done){
                //         var delay = el.dataset.index * 150;
                //         setTimeout(function(){
                //             Velocity(el,{opacity:1,height:'1.6em'},{ complete : done });
                //         },delay)
                //     },
                //     leave(el,done){
                //         var delay = el.dataset.index * 150;
                //         setTimeout(function(){
                //             Velocity(el,{opacity:0,height:0},{complete:done});
                //         },delay);
                //     }
                // }
            });

            var vm = new Vue({
                el:'#app',
                data : {
                    query:'',
                    items : [
                        {msg:'张三'},
                        {msg:'李四'},
                        {msg:'张芳芳'},
                        {msg:'王琳琳'},
                        {msg:'冯圆'}
                    ]
                },
                computed : {
                    ComputedList(){
                        var vm = this.query;
                        var nameList = this.items;
                        return nameList.filter(function(item){
                            return item.msg.toLowerCase().indexOf(vm.toLowerCase()) !== -1;
                        });
                    },
                    otherList(){
                        var vm = this.query;
                        var nameList = this.items;
                        return nameList.filter(function(item){
                            return item.msg.toLowerCase().indexOf(vm.toLowerCase()) === -1;
                        });
                    }
                }
            });
        </script>
    </body>
</html>